<template>
  <div style="height:670px;background: #f6f7f9;">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar title="在线反馈" left-arrow @click-left="$router.go(-1)">
      </van-nav-bar>
    </van-sticky>
    <van-field
        readonly
        clickable
        name="picker"
        :value="feedbackInfo.type"
        label="反馈类型"
        style="margin-top: 10px;"
        placeholder="请选择"
        @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      />
    </van-popup>

    <van-cell-group>
      <van-field v-if="showSn" v-model="feedbackInfo.orderSn" label="订单号" placeholder="请输入订单号" style="margin-top: 10px"/>
    </van-cell-group>

    <van-field
        v-model="feedbackInfo.message"
        rows="2"
        autosize
        style="margin-top: 10px;"
        label="问题描述"
        type="textarea"
        maxlength="50"
        placeholder="请填写..."
        show-word-limit
    />
    <van-button round @click="submitFeedback" type="info" style="width: 250px; margin-top: 50px;">确认提交</van-button>
  </div>
</template>

<script>
export default {
  name: "Feedback",
  data() {
    return {
      showSn:false,
      columns: ['订单反馈','意见反馈','Bug反馈'],
      showPicker: false,
      feedbackInfo:{
        type: '',
        orderSn:'',
        message:'',
      }
    };
  },
  methods: {
    onConfirm(value) {
      this.feedbackInfo.type = value;
      this.showPicker = false;
      if(value=='订单反馈'){
        this.showSn=true;
      }else {
        this.showSn=false;
      }
    },
    submitFeedback(){
      let url = 'http://localhost:9080/feedbacks/add-new';
      let type=this.feedbackInfo.type;
      if(type=='订单反馈'){
        this.feedbackInfo.type='1';
      }else if(type=='意见反馈'){
        this.feedbackInfo.type='2';
      }else if(type=='Bug反馈'){
        this.feedbackInfo.type='3';
      }
      let feedbackInfo = this.qs.stringify(this.feedbackInfo, {arrayFormat: 'repeat'});
      console.log('feedbackInfo = ' + feedbackInfo);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, feedbackInfo).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$toast.success('提交反馈成功!');
          this.$router.replace("/home/platform");
        }else{
          this.$toast.fail(responseBody.message);
        }
      });
    }
  },
}
</script>

<style scoped>

</style>
